<div class="col-md-10" style="text-align:center; width: 100%">
    <div id="datapan" class="panel" style="display: inline-block; width: 75%">


        <div id="showDiv">
            <div class="row panel"style="display: inline-block; width: 100%">

                <button type="button" class="pull-right btn btn-primary" onclick="showEdit()">Edit</button>
                <div class="col-md-2">
                    <div class="image-holder-outer">
                <?php
                $file = $base_url."images/fmis/members/".$facultyID."/".$facultyID.".jpg";
                $file_headers = @get_headers($file);
                if($file_headers[0] == 'HTTP/1.0 404 Not Found' || $file_headers[0] == 'HTTP/1.1 404 Not Found' ) {
                    $image = '<img class="img-responsive" alt="140x140" src="'.$base_url.'images/members/blank.png"/>';
                }
                else {
                    $image = '<img class="img-responsive" alt="140x140" src="'.$file.'"/>';
                }
                echo $image;
                ?>
                </div>
                </div>
                <div class="col-md-9" style="width:50%">
                    <h2><?php echo $details['FirstName'];?></h2>
                    <h4><i>Polytechnic University of the Philippines</i></h4>
                </div>
            </div>

            <div class="row">
                <div class="col-md-2"><strong>Expertise:</strong></div>
                <div class="col-md-10 expertise"><?php echo $details['Specialty']; ?></div>
            </div>
            <div class="row">
                <div class="col-md-2"><strong>Rank:</strong></div>
                <div class="col-md-10 level"><?php echo $details['RankID'];?></div>
            </div>

            <hr>

            <div class="row">
                <div class="col-md-6">
                    <label for="activ-hand">Birthday</label>

                </div>
                <div class="col-md-6">
                    <label for="activ-join"><?php echo $details['Birthday'];?></label>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <label for="activ-hand">Civil Status</label>

                </div>
                <div class="col-md-6">
                    <label for="activ-join"><?php echo $details['Civil_Status'];?></label>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <label for="activ-hand">Citizenship</label>

                </div>
                <div class="col-md-6">
                    <label for="activ-join"><?php echo $details['Citizenship'];?></label>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <label for="activ-hand">Religion</label>

                </div>
                <div class="col-md-6">
                    <label for="activ-join"><?php echo $details['Religion'];?></label>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <label for="activ-hand">Contact Number</label>

                </div>
                <div class="col-md-6">
                    <label for="activ-join"><?php echo $details['ContactNo'];?></label>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <label for="activ-hand">Email Address</label>

                </div>
                <div class="col-md-6">
                    <label for="activ-join"><?php echo $details['Email'];?></label>
                </div>
            </div>
        </div>

        <!------------------------------------------------------------------------------------------------->

        <div id='editDiv' hidden>

            <div class="row panel"style="display: inline-block; width: 100%">

                <button type="button" class="pull-right btn btn-primary" onclick="">Save</button>
                <button type="button" class="pull-right btn btn-primary" onclick="hideEdit()">Cancel</button>
                <div class="col-md-2">
                    <img src="<?=base_url();?>images/ann.jpg" class="img-thumbnail">
                </div>
                <div class="col-md-9" style="width:50%">
                    <input type='text'/ placeholder="Ann Charlotte">
                    <h4><i>Polytechnic University of the Philippines</i></h4>
                </div>
            </div>

            <div class="row">
                <div class="col-md-2"><strong>Expertise:</strong></div>
                <div class="col-md-10 expertise">
                    <input type='text'/>
                </div>
            </div>
            <div class="row">
                <div class="col-md-2"><strong>Rank:</strong></div>
                <div class="col-md-10 level">
                    <input type='text'/>
                </div>
            </div>

            <hr>

            <div class="row">
                <div class="col-md-6">
                    <label for="activ-hand">Birthday</label>

                </div>
                <div class="col-md-6">
                    <input type='text'/>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <label for="activ-hand">Civil Status</label>

                </div>
                <div class="col-md-6">
                    <input type='text'/>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <label for="activ-hand">Citizenship</label>

                </div>
                <div class="col-md-6">
                    <input type='text'/>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <label for="activ-hand">Religion</label>

                </div>
                <div class="col-md-6">
                    <input type='text'/>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <label for="activ-hand">Contact Number</label>

                </div>
                <div class="col-md-6">
                    <input type='text'/>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <label for="activ-hand">Email Address</label>

                </div>
                <div class="col-md-6">
                    <input type='text'/>
                </div>
            </div>
        </div>



    </div>
</div>


<script src="<?php echo base_url().JS;?>jquery-1.10.2.js"></script>
<script src="<?php echo base_url().JS;?>jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript">

    function showEdit()
    {
        $('#showDiv').slideUp(500);
        $('#editDiv').show();
        $('#editDiv').slideDown(500);
    }

    function hideEdit()
    {
        $('#editDiv').slideUp(500);
        $('#showDiv').slideDown(500);
    }

</script>